<template>

  <div style="height:400px">
    <h1>i am Xiaochangepassowrd</h1>
    <el-form :model="ruleForm" 
    status-icon :rules="rules" ref="ruleForm" label-width="100px" 
    class="demo-ruleForm">
        <el-form-item label="原密码" prop="oldPassword">
            <el-input type="password" v-model="ruleForm.oldPassword" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="新密码" prop="newPassword">
            <el-input type="password" v-model="ruleForm.newPassword" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="确认新密码" prop="checkPass">
            <el-input type="password" v-model="ruleForm.checkPass" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="手机号码" prop="phone">
            <el-input type="text" v-model="ruleForm.phone" autocomplete="off"></el-input>
        </el-form-item>
        <span @click="sendSMSBtn" v-show="sendSMSbtnshow" class="sendSMSBtn">发送验证码</span>
        <span v-show="sendSMSbtnshow2" class="sendSMSBtn2">{{changeShowNum}}秒再次发送</span>
        <el-form-item>
            <el-button type="primary" @click="submitForm('ruleForm')" style="margin-top:63px;">提交</el-button>
            <el-button @click="resetForm('ruleForm')">重置</el-button>
        </el-form-item>
    </el-form>
    <el-form :model="ruleForm2" 
    status-icon :rules="rules2" ref="ruleForm2" label-width="100px" 
    class="CpswruleForm2">
        <el-form-item label="验证码" prop="checkNum">
            <el-input type="text" v-model="ruleForm2.checkNum" style="width:100px"></el-input>
        </el-form-item>
    </el-form>
  </div>
</template>

<script>
import axios from 'axios'
    export default {
        data(){
            var checkPhone = (rule, value, callback) => {
                if (!value) {
                return callback(new Error('手机号码不能为空'));
                }
                setTimeout(() => {
                if (isNaN(value)) {
                    callback(new Error('请输入数字值'));
                } else {
                    if (value.length != 11) {
                    callback(new Error('手机号码必须为11位数字'));
                    } else {
                    callback();
                    this.sendSMSbtnshow=1;
                    }
                }
                }, 200);
            };
            var checkcheckNum = (rule, value, callback) => {
                this.allowSubmitBtn=0
                if (!value) {
                return callback(new Error('验证码不能为空'));
                }
                setTimeout(() => {
                if (isNaN(value)) {
                    callback(new Error('请输入数字值'));
                } else {
                    if (value.length != 6) {
                    callback(new Error('输入6位数字'));
                    } else {
                        this.$addr.get(`sms/${this.ruleForm2.checkNum}/check`).then(
                            response=>{
                                console.log('请求成功了',response)
                                if(response.data.state == 7000){
                                    callback(new Error('验证码输入有误'))
                                }else if(response.data.state == 200){
                                    this.allowSubmitBtn=1
                                    callback()
                                }
                            },
                            error=>{
                                console.log('请求失败了',error.message)
                            }
                        )
                    }
                }
                }, 200);
            };
            var validatePass = (rule, value, callback) => {
                if (value === '') {
                callback(new Error('请输入新密码'));
                } else {
                    if(this.ruleForm.oldPassword === value){
                        callback(new Error('您输入的新密码与原密码一致'));
                    }
                    if (this.ruleForm.checkPass !== '') {
                        this.$refs.ruleForm.validateField('checkPass');
                    }
                callback();
                }
            };
            var validatePass2 = (rule, value, callback) => {
                if (value === '') {
                callback(new Error('请再次输入新密码'));
                } else if (value !== this.ruleForm.newPassword) {
                callback(new Error('两次输入密码不一致!'));
                } else {
                callback();
                }
            };
            var validateOldPass =(rule, value, callback) => {
                if (value === '') {
                callback(new Error('请输入需要更改的密码'));
                } else {
                callback();
                }
            };
            return{
                allowSubmitBtn:0,
                sendSMSbtnshow:0,
                sendSMSbtnshow2:0,
                changeShowNum:0,
                templateID:1332081,//重置密码模板id
                ruleForm: 
                {
                    oldPassword: '',
                    newPassword: '',
                    checkPass: '',
                    phone:'',
                },
                ruleForm2:{checkNum:''},
                rules: {
                    oldPassword: [
                        { required: true, validator:validateOldPass, trigger: 'blur' },
                    ],
                    newPassword: [
                        { required: true, validator: validatePass, trigger: 'blur' }
                    ],
                    checkPass: [
                        { required: true, validator: validatePass2, trigger: 'blur' }
                    ],
                    phone: [
                        { required: true,validator: checkPhone, trigger: 'blur'},
                    ],
                },
                rules2:{
                    checkNum:[{
                        required: true, validator:checkcheckNum,trigger:'blur'
                    }],
                }
            }
        },
        name:'Xiaochangepassowrd',
        methods:{
            submitForm(formName) {
                if(!this.allowSubmitBtn){
                    this.$message({
                    message: '未验证码手机号码',
                    type: 'warning'
                    });
                }else{
                    this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.$confirm('您将修改新的密码, 是否继续?', '提示', {
                            confirmButtonText: '继续',
                            cancelButtonText: '取消',
                            type: 'warning'
                        }).then(() => {
                            this.$addr.get(`users/change_password?oldPassword=${this.ruleForm.oldPassword}&newPassword=${this.ruleForm.newPassword}`).then(
                            response=>{
                                console.log('请求成功了',response)
                                console.log('###oldPassword:',this.ruleForm.oldPassword,'###newPassword',this.ruleForm.newPassword);
                                if(response.data.state == 4002){
                                    this.$message({
                                        message: `${response.data.message}`,
                                        type: 'error'
                                    });
                                }else{
                                    //修改成功需要初始化表格
                                    this.$refs[formName].resetFields();
                                    this.$refs.ruleForm2.resetFields();
                                    this.$message({
                                    message: '修改密码成功',
                                    type: 'success'
                                    });
                                }
                            },error=>{
                                this.$message({
                                    message: '呕吼请求失败了',
                                        type: 'warning'
                                    });
                                console.log('请求失败了',error)
                            })
                        }).catch(() => {
                            this.$message({
                                type: 'info',
                                message: '已取消修改'
                        });          
                        });
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                    });
                }
            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
                this.$refs.ruleForm2.resetFields();
            },
            sendSMSBtn(){
                this.$addr.get(`users/get_by_uid`).then(
                response=>{
                    if(response.data.data.phone != this.ruleForm.phone){
                        this.$message({
                            message: `请输入用户名为${response.data.data.username}的手机号码`,
                                type: 'error'
                            });
                    }else{
                        this.$addr.get(`sms/${this.ruleForm.phone}/${this.templateID}/send`).then(
                            response=>{
                                console.log('请求成功了',response)
                                this.$message({
                                    message: '已经发送验证码，请注意查收',
                                    type: 'success'
                                });
                                this.sendSMSbtnshow=0
                                this.sendSMSbtnshow2=1
                            },
                            error=>{
                                this.$message({
                                    message: '呕吼请求失败了',
                                    type: 'warning'
                                });
                                console.log('请求失败了',error.message)
                            }
                        )
                    }
                },error=>{
                    this.$message({
                        message: '呕吼请求失败了',
                            type: 'warning'
                        });
                    console.log('请求失败了,我没有获取到用户的数据',error)
                })
            },

        },
        watch:{
            sendSMSbtnshow2(value){
                if(value == 1){
                    this.changeShowNum=60
                    this.timer = setInterval(() => {
                        this.changeShowNum--
                    }, 1000);
                    setTimeout(() => {
                        this.sendSMSbtnshow=1
                        this.sendSMSbtnshow2=0
                        clearInterval(this.timer)
                    }, 60000);
                }
            }
        },
    }
</script>

<style scoped>
    .demo-ruleForm{
        width: 500px;
    }
    .sendSMSBtn{
        z-index: 1;
        font-size: 12px;
        cursor: pointer;
        position: absolute;
        margin-top: 4px;
        margin-left: 230px;
        padding: 9px;
        padding-left: 20px;
        padding-right: 20px;
        border-radius: 3px;
        background-color: rgb(255, 233, 160);
    }
    .sendSMSBtn2{
        z-index: 1;
        font-size: 12px;
        cursor: not-allowed;
        margin-left: 230px;
        margin-top: 4px;
        position: absolute;
        padding: 9px;
        padding-left: 20px;
        padding-right: 20px;
        border-radius: 3px;
        background-color: rgb(223, 223, 223);
    }
    .CpswruleForm2{
        margin-top: -126px;
    }
</style>